<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>

	<body>
		<h1>新增用户</h1>
		<div id="app">
			<!-- 提交事件不再重载页面 -->
			<form v-on:submit.prevent="addUser">
				昵称：<input type="text" name="name" id="name" v-model="name" />
				<input type="submit" value="新增" />
			</form>
			--------------------------------------------------------------------------------
			<ul>
				<li v-for="item in items">
				
					{{item.name}}
					
					<a href="">{{item.address}}</a>
					
					<p>{{item.shuoshuo}}</p>
				</li> 
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				name: null,
				items: null
			},
			created: function () {
					this.show();
				},
			methods: {
				addUser: function() {
					self = this;
					axios.post('http://localhost:8088/user/add', {
							name: self.name
						})
						.then(function(response) {
							alert(response.data);
						})
						.catch(function(error) {
							console.log(error);
						});
					app.show();
				},
				show: function() {
					self = this;
					axios.post('http://localhost:8088/user/show')
						.then(function(response) {
							self.items = response.data;
						})
						.catch(function(error) {
							console.log(error);
						});
				}
			}
		})
		
	</script>

</html>